<template>
	<view class="history">
		<!-- 圆形图 -->
		<view class="history-shan flex">
			<view class="shan-one sector">
				<view class="num">000</view>
				<view class="day">今日步数</view>
			</view>
			<view class="shan-two sector">
				<view class="num">000</view>
				<view class="day">今日步数</view>
			</view>
			<view class="shan-three sector">
				<view class="num">00</view>
				<view class="day">今日步数</view>
			</view>
		</view>
		<!-- z折线图 -->
		<view class="history-linechart">
			<h1>最近七天步数</h1>
			<view>
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA"
					@touchend="moveLineA"></canvas>
			</view>
			<h1>最近三十天步数</h1>
			<view>
				<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchmove="moveLineB"
					@touchend="moveLineB"></canvas>
			</view>
		</view>
		<!-- 表格 -->
		<uni-table border stripe>
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">日期</uni-th>
				<uni-th align="center">步数</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in datass" :key="index">
				<uni-td align="center">{{item.data}}</uni-td>
				<uni-td align="center">{{item.steps}}</uni-td>

			</uni-tr>

		</uni-table>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js'; //引入js文件
	var _self; //用于全局使用this
	var canvaLineA = null; //uCharts实例
	var canvaLineB = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '', //画布的宽高
				data: { //数据
					categories: ["2012", "2013", "2014", "2015", "2016", "2017"],
					series: [{
						name: "成交量A",
						data: [35, 8, 25, 37, 4, 20]
					}]
				},
				datass: [{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
					{
						data: '2020-9-9',
						steps: 12312
					},
				]
			}
		},
		onLoad() {
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500); //设置宽高
			_self = this //声明this
			_self.showLineA("canvasLineA", _self.data); //触发执行函数
			_self.showLineB("canvasLineB", _self.data); //触发执行函数
		},
		methods: {
			// 折线图一 最近7天步数
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#90ed7d'], //每一条的颜色
					fontSize: 11, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						disableGrid: true,
						// axisLineColor:'#666',
						// gridType: 'solid',
						gridColor: '#666'
						// gridColor: '#CCCCCC', //X轴网格颜色
						// gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						// dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#666',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'straight' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA(e) {
				canvaLineA.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			// 折线图二 最近三十天
			showLineB(canvasId, chartData) {
				canvaLineB = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#90ed7d'], //每一条的颜色
					fontSize: 11, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						disableGrid: true,
						// axisLineColor:'#666',
						// gridType: 'solid',
						gridColor: '#666'
						// gridColor: '#CCCCCC', //X轴网格颜色
						// gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						// dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#666',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'straight' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineB(e) {
				canvaLineB.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			// 隔行变色






		}
	}
</script>

<style>
	.history {
		width: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.sector {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		text-align: center;
		padding: 20px 0;
		box-sizing: border-box;
	}

	.history-shan {
		padding: 25px 0;
	}

	.shan-one {
		border: 3px solid #f00;
	}

	.shan-two {
		border: 3px solid #00f;
	}

	.shan-three {
		border: 3px solid #0f0;
	}

	.day {
		color: #666;
		font-size: 10px;

	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.history-linechart {
		text-align: center;
	}

	.tabler {
		width: 90%;
	}

	.uni-table-scroll {
		width: 90% !important;
		margin: 30px auto;
	}

	::v-deep .uni-table-tr:nth-of-type(2n) {
		background-color: #FFFFFF
	}

	::v-deep .uni-table-tr {
		background-color: #ccc
	}
</style>
